@cursor: default,pointer,wait,text,move,help,not-allowed;
@flex: range(0, 12, 1);/*range(start,end,step)*/
@line: range(0, 4, 1);
@color: {
	white: #fff;
	block: #333;
	light: #999;
	default: #f1f1f1;
	blue: #48b0f1;
	green: rgb(22, 204, 22);
	red: red;
};

.loop(@counter) when (@counter <= 100) {
    .m-@{counter} { margin: unit(@counter, px); }
    .p-@{counter} { padding: unit(@counter, px); }
    .mt-@{counter}{ margin-top: unit(@counter, px); }
    .mb-@{counter}{ margin-bottom: unit(@counter, px); }
    .ml-@{counter}{ margin-left: unit(@counter, px); }
    .mr-@{counter}{ margin-right: unit(@counter, px); }
    .pt-@{counter}{ padding-top: unit(@counter, px); }
    .pb-@{counter}{ padding-bottom: unit(@counter, px); }
    .pl-@{counter}{ padding-left: unit(@counter, px); }
    .pr-@{counter}{ padding-right: unit(@counter, px); }
    .fl-@{counter}{ flex: 0 0 percentage((@counter/100)); }
    .fw-@{counter}{ width: percentage((@counter/100)); }
    .fh-@{counter}{ height: percentage((@counter/100)); }
    .w-@{counter} { width: unit(@counter, px); }
    .h-@{counter} { height: unit(@counter, px); }
    .lh-@{counter}{ line-height: unit(@counter, px); }
	.z-@{counter} { z-index: @counter; }
	.border-radius-@{counter} { border-radius: unit(@counter, px); }
    .loop(@counter + 1);
}
  
.loop(0);

each(@line, {
	.line-@{value} {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-wrap: break-word;
		word-break: break-all;
		display: -webkit-box;
		line-clamp: @value;
		-webkit-line-clamp: @value;
		-webkit-box-orient: vertical;
	}
});

each(@flex, {
	.flex-@{value} {
		flex: @value;
	}
});

each(@cursor, {
	.cursor-@{value} {
		cursor: @value;
	}
});

each(@color, {
	.color-@{key} {
		color: @value;
	}
	.bg-@{key} {
		background-color: @value;
	}
});

